/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, TableHead, InputIdProvider, InputDatalist, BlobInputList, TextArea, LineColumn, InputLine,
} from "customize-easy-ui-component";
import {CCellUnit, InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {useOmnipotentPref, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";

export const 检验结果选=['√','——','×'];
export interface Props extends InternalItemProps {
  iAname?: string[];           //附加的存储那些字段     ，'观测备注'
}
//通用配置模型
//标题区最大列数确定的：总体每一行配置如下的[name,titl[{t:'',s: 3}],item,unit]形式；其中titl可变的长度。t是文本,s是跨越几行的TD数默认=1。unit默认='';item=必须有的主标题描述。
//这里第二字段 配置 [],和 [{} ], 不一样的，前者2占列，后者只占一列。
export const items宏观焊 = [
  ['接焊缝', [{t:'结构检查',s:5}], '本体、对接焊缝、接管角焊缝的连接'],
  ['补强', [{}], '开孔位置及补强', ],
  ['缝布置', [{}], '焊缝布置及型式', ],
  ['支座型', [{}], '支座型式与布置', ],
  ['排污装', [{}], '排放（疏水、排污）装置的设置',  ],
  ['对口错边', [{t:'几何尺寸检查',s:5}], '纵/环焊缝最大对口错边量', 'mm'],
  ['大棱角', [{}], '纵/环焊缝最大棱角度',  'mm'],
  ['大余高', [{}], '纵/环焊缝最大余高',  'mm'],
  ['大咬边', [{}], '纵/环焊缝最大咬边',  'mm'],
  ['内径差', [{}], '同一断面最大内径与最小内径之差', 'mm'],
  ['铭牌标', [{t:'罐体外观检验',s:9}], '铭牌和标志', ],
  ['面腐蚀', [{}], '内外表面的腐蚀',  ],
  ['裂纹', [{}], '裂纹、泄漏、鼓包、变形、机械接触损伤',  ],
  ['卡焊迹', [{}], '工卡具焊迹、电弧灼伤',  ],
  ['紧固栓', [{}], '法兰、密封面及其紧固螺栓',  ],
  ['基础下沉', [{}], '支座或者基础的下沉、倾斜、开裂',  ],
  ['地脚栓', [{}], '地脚螺栓',  ],
  ['柱垂直', [{}], '支柱的垂直度',  'mm'],
  ['沉积物', [{}], '排放（疏水、排污）装置的堵塞、腐蚀、沉积物',  ],
   //其他检验 2 : 采用原始装配法做。
];

export const itemA宏观焊接: string[] = ['宏它1','宏它2', '宏观结果','宏观备注' ];
items宏观焊.forEach(([name, title, initIsp], i: number) => {
  itemA宏观焊接.push(name as string);
});
const 备注选=['水泥封住', '见结果栏'];
const offAseq=items宏观焊.length;
export const Macroscopic =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, iAname,}: Props, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const itemA = React.useMemo(() => {
           return [ ...iAname ?? [], ...itemA宏观焊接];
      }, [ iAname]);
      const [getInpFilter] = useMeasureInpFilter(null, itemA,);
      // const resulName = (items空载制动[0][0] ?? '仪一往') as string;         //用制动性能测量仪:的检验结果，对应存储名；
      const titNode=useOmnipotentPrefTitle({config: items宏观焊, });
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {items宏观焊.map(([name, titlps, item, unit]: any, i: number) => {
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}&nbsp;
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;检验结果
                    <BlobInputList value={inp?.[name]?.r || ''} datalist={检验结果选}
                                   style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                    {unit}
                  </div>
                  <div>
                    备注
                    <InputIdProvider>
                      <InputDatalist value={(inp?.[name]?.m) || ''} datalist={备注选}
                                     style={{display: 'inline-flex', width: '11rem'}}
                                     onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                    </InputIdProvider>
                  </div>
                </div>
              </React.Fragment>);
            })}
            <hr/>
            其他检验：
            <LineColumn>
              <InputLine label={`项目${offAseq+1}内容：`}>
                <BlobInputList value={inp?.宏它1?.t || ''} rows={2}
                               onListChange={v => objNestSet('宏它1', 't', v || undefined, inp, setInp)}/>
              </InputLine>
              <InputLine label={`项目${offAseq+1}检验结果：`}>
                <BlobInputList value={inp?.宏它1?.r || ''} rows={1} datalist={检验结果选}
                               onListChange={v => objNestSet('宏它1', 'r', v || undefined, inp, setInp)}/>
              </InputLine>
              <InputLine label={`项目${offAseq+1}备注：`}>
                <InputDatalist value={inp?.宏它1?.m || ''}  datalist={备注选}
                               onListChange={v => objNestSet('宏它1', 'm', v || undefined, inp, setInp)}/>
              </InputLine>
              <InputLine label={`项目${offAseq+2}内容：`}>
                <BlobInputList value={inp?.宏它2?.t || ''} rows={2}
                               onListChange={v => objNestSet('宏它2', 't', v || undefined, inp, setInp)}/>
              </InputLine>
              <InputLine label={`项目${offAseq+2}检验结果：`}>
                <BlobInputList value={inp?.宏它2?.r || ''} rows={1} datalist={检验结果选}
                               onListChange={v => objNestSet('宏它2', 'r', v || undefined, inp, setInp)}/>
              </InputLine>
              <InputLine label={`项目${offAseq+2}备注：`}>
                <InputDatalist value={inp?.宏它2?.m || ''}  datalist={备注选}
                               onListChange={v => objNestSet('宏它2', 'm', v || undefined, inp, setInp)}/>
              </InputLine>
            </LineColumn>
            <Text variant="h5">备注：</Text>
            <TextArea value={inp?.宏观备注 || ''} rows={3}
                      onChange={e => setInp({...inp, 宏观备注: e.currentTarget.value || undefined})}/>
            <Text variant="h5">宏观检验-结果：</Text>
            <BlobInputList value={inp?.宏观结果 || ''} rows={3}  datalist={['符合要求。该项目安全状况等级2级。']}
                           onListChange={v => setInp({...inp, 宏观结果: v || undefined})}/>
            {children}
          </InspectRecordLayout>
      );
});

const tailRender = (orc: any, name: string, lix: number, unit: any) => <>
    {unit ? <CCellUnit unit={unit}>{orc?.[name]?.r ??'／'}</CCellUnit>
             :
         <CCell>{orc?.[name]?.r??'／'}</CCell>
    }
    <CCell>{orc?.[name]?.m??'／'}</CCell>
</>;

export const MacroscopicVw= ({ orc, rep,children} :{ orc:any, rep:any,children?:any}
) => {
  const addRcfg =React.useMemo(()=>{
      let arr=[];
      for(let i = 0; i < 2; i++) {
        const name='宏它'+(i+1);
        if(orc?.[name]?.t)   arr.push(orc?.[name]);
      }
      return arr;
  },[orc]);
  const hasAdd=addRcfg.length>0;
  const [renderBrkTest]=useOmnipotentPref({orc, config:items宏观焊,
                  tailRender, pcols:1, noNo:false, unitCel:false});
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}} }>
      <Text id='Macroscopic' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>球形储罐宏观检验报告</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["3.5%","8.5%","%","28%","18%"]  }
            css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight  miniw={800}>
      <TableHead>
          <TableRow>
            <CCell colSpan={3}>检 验 项 目</CCell><CCell>检验结果</CCell><CCell>备注</CCell>
          </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={'Macroscopic'}>
          {renderBrkTest}
          {!hasAdd && <TableRow><CCell>{offAseq+1}</CCell><CCell>其他检验</CCell><CCell colSpan={3}>／</CCell></TableRow>}
          {hasAdd && addRcfg.map((obj:any,i:number) => {
              return  <TableRow key={offAseq+i+1}>
                  <CCell>{offAseq+i+1}</CCell>
                  {0===i && <CCell rowSpan={addRcfg.length}>其他检验</CCell>}
                  <CCell>{obj?.t || '／'}</CCell><CCell>{obj?.r || '／'}</CCell><CCell>{obj?.m || '／'}</CCell>
                </TableRow>
            })
          }
          <TableRow>
            <Cell split={true} colSpan={5}>备注:
              <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                {orc.宏观备注 || '／'}
              </div>
            </Cell>
          </TableRow>
          <TableRow>
            <Cell split={true} colSpan={5}>结果：
              <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                {orc.宏观结果 || '／'}
              </div>
            </Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
    </TailMenRowIspCheck>
    {children}
  </>;
};
